import { computed, ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { usePreferredColorScheme } from '@vueuse/core';
import { localStg } from '@/utils/storage';

// 客户端主题设置类型
interface ClientThemeSettings {
  themeScheme: 'light' | 'dark' | 'auto';
  themeColor: string;
  layout: {
    mode: 'horizontal' | 'vertical';
  };
  header: {
    height: number;
    visible: boolean;
  };
  tab: {
    visible: boolean;
    height: number;
  };
  footer: {
    visible: boolean;
    height: number;
  };
  page: {
    animate: boolean;
    animateMode: string;
  };
}

// 客户端默认主题设置
const defaultClientThemeSettings: ClientThemeSettings = {
  themeScheme: 'light',
  themeColor: '#646cff',
  layout: {
    mode: 'horizontal'
  },
  header: {
    height: 64,
    visible: true
  },
  tab: {
    visible: true,
    height: 48
  },
  footer: {
    visible: true,
    height: 64
  },
  page: {
    animate: true,
    animateMode: 'fade-slide'
  }
};

// 获取客户端主题设置
function getClientThemeSettings(): ClientThemeSettings {
  const localSettings = localStg.get('clientThemeSettings');
  return localSettings ? { ...defaultClientThemeSettings, ...localSettings } : defaultClientThemeSettings;
}

/** 客户端主题store */
export const useClientThemeStore = defineStore('client-theme-store', () => {
  const osTheme = usePreferredColorScheme();
  
  /** 客户端主题设置 */
  const settings = ref<ClientThemeSettings>(getClientThemeSettings());

  /** 暗色模式 */
  const darkMode = computed(() => {
    if (settings.value.themeScheme === 'auto') {
      return osTheme.value === 'dark';
    }
    return settings.value.themeScheme === 'dark';
  });

  /** 布局模式 */
  const layout = computed(() => settings.value.layout);

  /** 头部配置 */
  const header = computed(() => settings.value.header);

  /** 标签配置 */
  const tab = computed(() => settings.value.tab);

  /** 页脚配置 */
  const footer = computed(() => settings.value.footer);

  /** 页面配置 */
  const page = computed(() => settings.value.page);

  /** 主题色 */
  const themeColor = computed(() => settings.value.themeColor);

  /**
   * 设置主题方案
   * @param scheme 主题方案
   */
  function setThemeScheme(scheme: 'light' | 'dark' | 'auto') {
    settings.value.themeScheme = scheme;
    saveSettings();
  }

  /**
   * 切换主题方案
   */
  function toggleThemeScheme() {
    const schemes: ('light' | 'dark' | 'auto')[] = ['light', 'dark', 'auto'];
    const currentIndex = schemes.findIndex(scheme => scheme === settings.value.themeScheme);
    const nextIndex = (currentIndex + 1) % schemes.length;
    setThemeScheme(schemes[nextIndex]);
  }

  /**
   * 设置布局模式
   * @param mode 布局模式
   */
  function setLayoutMode(mode: 'horizontal' | 'vertical') {
    settings.value.layout.mode = mode;
    saveSettings();
  }

  /**
   * 设置标签可见性
   * @param visible 是否可见
   */
  function setTabVisible(visible: boolean) {
    settings.value.tab.visible = visible;
    saveSettings();
  }

  /**
   * 设置主题色
   * @param color 主题色
   */
  function setThemeColor(color: string) {
    settings.value.themeColor = color;
    saveSettings();
  }

  /**
   * 设置页面动画
   * @param animate 是否开启动画
   */
  function setPageAnimate(animate: boolean) {
    settings.value.page.animate = animate;
    saveSettings();
  }

  /**
   * 设置页面动画模式
   * @param mode 动画模式
   */
  function setPageAnimateMode(mode: string) {
    settings.value.page.animateMode = mode;
    saveSettings();
  }

  /**
   * 设置头部可见性
   * @param visible 是否可见
   */
  function setHeaderVisible(visible: boolean) {
    settings.value.header.visible = visible;
    saveSettings();
  }

  /**
   * 设置页脚可见性
   * @param visible 是否可见
   */
  function setFooterVisible(visible: boolean) {
    settings.value.footer.visible = visible;
    saveSettings();
  }

  /**
   * 保存设置到本地存储
   */
  function saveSettings() {
    localStg.set('clientThemeSettings', settings.value);
  }

  /**
   * 重置设置
   */
  function resetSettings() {
    settings.value = { ...defaultClientThemeSettings };
    saveSettings();
  }

  // 监听设置变化，自动保存
  watch(settings, () => {
    saveSettings();
  }, { deep: true });

  return {
    // 状态
    settings,
    darkMode,
    layout,
    header,
    tab,
    footer,
    page,
    themeColor,
    
    // 方法
    setThemeScheme,
    toggleThemeScheme,
    setLayoutMode,
    setTabVisible,
    setThemeColor,
    setPageAnimate,
    setPageAnimateMode,
    setHeaderVisible,
    setFooterVisible,
    saveSettings,
    resetSettings
  };
}); 